<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello world!</title>
    <style type="text/css">
        #container {
            /*地图(容器)显示大小*/
            width: 1200px;
            height: 1000px;
        }

        #demo {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
    <!--引入Javascript API GL，参数说明参见下文-->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

</head>
<!-- 页面载入后，调用init函数 -->

<!-- <body onload="initMap()"> -->

<body>
    <!-- 定义地图显示容器 -->
    <div id="container"></div>
    <div id="demo"></div>
</body>
<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
<script>
    // let pointx=31.940187,
    // pointy=118.808821;
    let pointx = 35.940187,
        pointy = 118.808821;
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    //定义地图中心点坐标
    // "lat": 31.940187,
    // "lng": 118.808821,
    var center = new TMap.LatLng(pointx, pointy)
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    var map = new TMap.Map(document.getElementById('container'), {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
        //设置俯仰角
        pitch: 43.5,
        //设置地图旋转角度
        rotation: 45,
        viewMode: '2D',
    });
    function initMap() {
        //定义地图中心点坐标
        // "lat": 31.940187,
        // "lng": 118.808821,
        var center = new TMap.LatLng(31.940187, 118.808821)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            //设置俯仰角
            pitch: 43.5,
            //设置地图旋转角度
            rotation: 45,
            viewMode: '2D',
        });

    }
    var geolocation = new qq.maps.Geolocation("6XABZ-V6OL2-AXMUQ-CTPGA-MKVFS-BZBOX", "myApp");
    // var positionNum = 0;
    var options = { timeout: 8000 };
    // 用户定位
    function showPosition(position) {
        /* {
            "module": "geolocation",
            "type": "h5",
            "adcode": "320115",
            "nation": "中国",
            "province": "江苏省",
            "city": "南京市",
            "district": "江宁区",
            "addr": "江宁区百家湖花园2期北(利源中路东)",
            "lat": 31.940187,
            "lng": 118.808821,
            "accuracy": 94595
        } */
        // 比如positonNum是官方文档demo添加的，210922我们写的demo里面并不需要这个功能
        // positionNum++;
        // document.getElementById("demo").innerHTML += "序号：" + positionNum;
        document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
        console.log(position);
        console.log(position.lat);
        console.log(position.lng);
        pointx = position.lat
        pointy = position.lng
        //修改地图中心点
        map.setCenter(new TMap.LatLng(position.lat, position.lng));
        // document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;

    };
    // 定位失败时候
    function showErr() {
        // positionNum++;
        // document.getElementById("demo").innerHTML += "序号：" + positionNum;
        document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";
        // document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
    };
    // 使用定位方法
    geolocation.getLocation(showPosition, showErr, options)
    // map.setCenter(new TMap.LatLng(pointx, pointy));
    // console.log('最外层的', pointx, pointy);

</script>

</html>